import {
	DomainConnectionSetupMode,
	type DomainConnectionSetupModeValue,
} from '@automattic/api-core';
import {
	Button,
	RadioControl,
	__experimentalText as Text,
	__experimentalVStack as VStack,
	__experimentalHStack as HStack,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useCallback, useState } from 'react';
import { ButtonStack } from '../../components/button-stack';
import { Card, CardBody, CardDivider } from '../../components/card';
import Notice from '../../components/notice';
import SetupStep from './setup-step';

interface ConnectionModeStep {
	title: string;
	label: string;
	content: React.ReactNode;
}

interface ConnectionModeCardProps {
	mode: DomainConnectionSetupModeValue;
	title: string;
	description: string;
	infoText: string;
	steps: ConnectionModeStep[];
	stepsCompleted: boolean[];
	selectedMode: DomainConnectionSetupModeValue;
	onModeChange: ( mode: DomainConnectionSetupModeValue ) => void;
	onStepChange: ( index: number, checked: boolean ) => void;
	onVerifyConnection: () => void;
	isUpdatingConnectionMode: boolean;
	verificationDisabled: boolean;
	hasEmailOrOtherServices: boolean;
}

export default function ConnectionModeCard( {
	mode,
	title,
	description,
	infoText,
	steps,
	stepsCompleted,
	selectedMode,
	onModeChange,
	onStepChange,
	onVerifyConnection,
	isUpdatingConnectionMode,
	verificationDisabled,
	hasEmailOrOtherServices,
}: ConnectionModeCardProps ) {
	const isSelected = selectedMode === mode;

	// Track which steps are expanded (first step expanded by default)
	const [ stepsExpanded, setStepsExpanded ] = useState< boolean[] >(
		steps.map( ( _, index ) => index === 0 )
	);

	const handleStepChange = ( index: number, checked: boolean ) => {
		onStepChange( index, checked );

		// When a step is checked, collapse all steps and expand the next one
		if ( checked ) {
			const newStepsExpanded = steps.map( () => false );

			// If not the last step, expand the next one
			if ( index < steps.length - 1 ) {
				newStepsExpanded[ index + 1 ] = true;
			} else {
				// If it's the last step, keep it expanded
				newStepsExpanded[ index ] = true;
			}

			setStepsExpanded( newStepsExpanded );
		}
	};

	const handleStepToggle = ( index: number, expanded: boolean ) => {
		setStepsExpanded( ( prev ) => {
			const newState = [ ...prev ];
			newState[ index ] = expanded;
			return newState;
		} );
	};

	const handleModeClick = useCallback(
		( event: React.MouseEvent< HTMLDivElement > ) => {
			const target = event.target as HTMLElement;
			// Skip if clicking directly on the RadioControl (fieldset or input)
			if ( target.closest( 'fieldset' ) || target.tagName === 'INPUT' ) {
				return;
			}

			onModeChange( mode );
		},
		[ mode, onModeChange ]
	);

	return (
		<Card className="connection-mode-card">
			<CardBody className="connection-mode-card__body">
				<VStack spacing={ 4 }>
					<HStack
						spacing={ 2 }
						justify="flex-start"
						onClick={ handleModeClick }
						style={ { cursor: 'pointer' } }
					>
						<RadioControl
							selected={ selectedMode }
							options={ [ { label: '', value: mode } ] }
							onChange={ ( value: string ) =>
								onModeChange( value as DomainConnectionSetupModeValue )
							}
						/>
						<VStack spacing={ 1 }>
							<Text size="medium" weight={ 500 }>
								{ title }
							</Text>
							<Text variant="muted" size={ 12 }>
								{ description }
							</Text>
						</VStack>
					</HStack>
					{ isSelected && (
						<>
							<CardDivider />
							<VStack spacing={ 6 }>
								{ mode === DomainConnectionSetupMode.SUGGESTED && ! hasEmailOrOtherServices && (
									<Notice variant="info" title="No email or other services detected">
										<Text>
											{ __(
												'You can safely connect your domain without affecting anything else.'
											) }
										</Text>
									</Notice>
								) }
								{ mode === DomainConnectionSetupMode.SUGGESTED && hasEmailOrOtherServices && (
									<Notice variant="info" title="Email or other services detected">
										<Text>
											{ __(
												'We detected email services attached to your domain. If you want to continue with this setup, we recommend copying over your DNS records before proceeding to avoid any disruptions.'
											) }
										</Text>
									</Notice>
								) }
								{ mode === DomainConnectionSetupMode.ADVANCED && hasEmailOrOtherServices && (
									<Notice variant="info" title="Email or other services detected">
										<Text>
											{ __(
												'To avoid disruption, this is the safest way to connect your domain name.'
											) }
										</Text>
									</Notice>
								) }
								<Text>{ infoText }</Text>
							</VStack>
							<div>
								{ steps.map( ( step, index ) => (
									<div key={ step.title }>
										<SetupStep
											className="domain-connection-setup__step"
											expanded={ stepsExpanded[ index ] }
											completed={ stepsCompleted[ index ] }
											onCheckboxChange={ ( checked ) => handleStepChange( index, checked ) }
											onToggle={ ( expanded ) => handleStepToggle( index, expanded ) }
											title={ step.title }
											label={ step.label }
										>
											{ step.content }
										</SetupStep>
										{ index < steps.length - 1 && (
											<CardDivider
												style={ { borderColor: 'var(--dashboard-overview__divider-color)' } }
											/>
										) }
									</div>
								) ) }
							</div>
							<ButtonStack justify="flex-start">
								<Button
									variant="primary"
									onClick={ onVerifyConnection }
									isBusy={ isUpdatingConnectionMode }
									disabled={ verificationDisabled }
								>
									{ __( 'Verify Connection' ) }
								</Button>
							</ButtonStack>
						</>
					) }
				</VStack>
			</CardBody>
		</Card>
	);
}
